<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="never">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .phone {
            width: 650px;
            height: 430px;
            border: 2px solid #222;
            margin: 50px auto 0;
            /* background-image: url(https://i0.hdslb.com/bfs/feed-admin/ae7d5bc9d919905f4007b34bf284fca943596007.jpg@880w_388h_1c_95q);
            background-repeat: no-repeat;
            background-size: 650px 430px; */
            position: relative;
        }
        .phone img{
            width: 650px;
            height: 430px;
        }
        .vacancy{
            width: 70px;
            height: 70px;
            background-color: #fff;
            position: absolute;
        }
        .completion{
            width: 70px;
            height: 70px;
            background-image: url(https://i0.hdslb.com/bfs/feed-admin/ae7d5bc9d919905f4007b34bf284fca943596007.jpg@880w_388h_1c_95q);
            background-repeat: no-repeat;
            background-size: 650px 430px;
            /* border: 1px solid yellow; */
            position: absolute;
            left: 0;
            z-index: 333;
        }
        .slide {
            width: 650px;
            height: 70px;
            border: 2px solid #000;
            border-top: none;
            /* border-radius: 25px; */
            position: relative;
            margin: 0 auto;
        }

        .circle {
            width: 68px;
            height: 68px;
            /* border-radius: 50%; */
            border: 1px solid red;
            position: absolute;
            top: 0px;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="phone">
        <img src="https://i0.hdslb.com/bfs/feed-admin/ae7d5bc9d919905f4007b34bf284fca943596007.jpg@880w_388h_1c_95q" alt="">
        <div class="completion"></div>
        <div class="vacancy"></div>
    </div>
    <div class="slide">
        <div class="circle"></div>
    </div>
</body>
<script>
    var circle = document.querySelector(".circle");
    var slide = document.querySelector(".slide");
    var phone = document.querySelector(".phone");
    var completion = document.querySelector(".completion");
    var vacancy = document.querySelector(".vacancy");

    var maxWidth = phone.clientWidth - vacancy.clientWidth * 2;
    var maxHeight = phone.clientHeight - vacancy.clientHeight;
    var numWidth = Math.floor(Math.random() * maxWidth + vacancy.clientHeight);
    var numHeight = Math.floor(Math.random() * maxHeight);
    console.log(numWidth);
    console.log(numHeight);

    vacancy.style.left = numWidth + "px";
    vacancy.style.top = numHeight + "px";
    completion.style.top = numHeight + "px";

    completion.style.backgroundPosition = - numWidth + "px" + " " + - numHeight + "px";
    console.log(completion.style.backgroundPosition);

    circle.onmousedown = function(event){
        var event = event || window.event;
        var posX = event.offsetX;
        var maxLeft = slide.clientWidth - circle.clientWidth;

        var x = null;

        document.onmousemove = function (event) {
            var event = event || window.event;
            x = event.pageX - posX - slide.offsetLeft;

            // if (x <= 0) x = 0;
            // if (x >= maxLeft) x = maxLeft;
            x = Math.min(Math.max(0 , x) , maxLeft);

            circle.style.left = x + "px";
            circle.style.top =  "0px";
            completion.style.left = x + "px";
            
        }

        document.onmouseup = function () {
            if(x >= numWidth - 5 && x <= numWidth + 5){
                location.href = "https://www.baidu.com";
            }else{
                circle.style.left = "0px";
                completion.style.left = "0px";
                document.onmousemove = null;
            }
        }
    }

</script>

</html>